<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
        <title>Accordion Test Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0;"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
		<script type="text/javascript" src="../../include-all.js"></script>
        <style>
        </style>
		<script type="text/javascript">
		var view = new dorado.widget.View({ layout: "Anchor" });
 
        var toolbar = new dorado.widget.ToolBar({
            items: [{
                caption: "insert section",
                listener: {
                    onClick: function(){
                        accordion.addSection({
                            caption: "关闭",
                            control: new dorado.widget.Panel({
                                children: [new dorado.widget.Button({
                                    width: 150,
                                    caption: "测试子组件",
                                    listener: {
                                        onClick: function() {
                                            alert(123);
                                        }
                                    },
                                    style: {
                                        marginTop: 4
                                    }
                                })]
                                ,buttons: [new dorado.widget.Button({
                                    caption: "确定",
                                    width: 80,
                                    listener: {
                                        onClick: function(){
                                        }
                                    }
                                }), new dorado.widget.Button({
                                    caption: "取消",
                                    width: 80,
                                    listener: {
                                        onClick: function(){
                                        }
                                    }
                                })]
                            })
                        }, 1);
                    }
                }
            }, {
                caption: "remove section(1)",
                listener: {
                    onClick: function(){
                        accordion.removeSection(1);
                    }
                }
            }, {
                caption: "clear sections",
                listener: {
                    onClick: function(){
                        accordion.clearSections();
                    }
                }
            }, {
                caption: "set section visible",
                listener: {
                    onClick: function(){
                        var section = accordion.getSection(1);
                        section.set("visible", !section._visible);
                    }
                }
            }, {
                caption: "set section disabled",
                listener: {
                    onClick: function(){
                        var section = accordion.getSection(2);
                        section.set("disabled", !section._disabled);
                    }
                }
            }]
        });
 
        view.addChild(toolbar);

        var items1 = [];
        for (var i = 0; i < 50; i++) {
            items1.push("Block " + i);
        }

        var blockview1 = new dorado.widget.BlockView({
            scrollMode: "lazyRender",
            width: 400,
            height: 300,
            lineSize: 4,
            fillLine: true,
            items: items1,
            draggable: true,
            dragTags: "block",
            droppable: true,
            droppableTags: "block",
            dropMode: "onOrInsertItems"
        });

        var accordion = new dorado.widget.Accordion({
            animate: true,
            sections: [{
                name: "file",
                caption: "文件",
                icon: "del.gif",
                //disabled: true,
                exClassName: "test",
                control: {
                    $type: "Menu",
                    id: "test2",
                    iconPosition: "top",
                    items: [{
                        caption: "测试",
                        icon: "add.gif",
                        items: [{
                            caption: "测试2"
                        }]
                    }, {
                        caption: "测试",
                        icon: "add.gif"
                    }, {
                        caption: "测试",
                        icon: "add.gif"
                    }, {
                        caption: "测试",
                        icon: "add.gif"
                    }, {
                        caption: "测试",
                        icon: "add.gif"
                    }, {
                        caption: "测试",
                        icon: "add.gif"
                    }]
                }
            },{
                caption: "打开",
				icon: "del.gif",
                //expandable: false,
                control: blockview1,
                listener: {
                    onClick: function(){
                        //alert(123);
                    }
                }
            }, {
                caption: "关闭",
				control: {
                    $type: "Panel",
					children: [new dorado.widget.Button({
						width: 150,
						caption: "测试子组件",
						listener: {
							onClick: function() {
								alert(123);
							}
						},
						style: {
							marginTop: 4
						}
					})]
					,buttons: [new dorado.widget.Button({
						caption: "确定",
						width: 80,
						listener: {
							onClick: function(){
							}
						}
					}), new dorado.widget.Button({
						caption: "取消",
						width: 80,
						listener: {
							onClick: function(){
							}
						}
					})]
				}
            },
            {
                caption: "保存",
                listener: {
                    onClick: function(self){
                        //alert("你刚刚点击了：" + self["_caption"]);
                    }
                },
                control: {
                    $type: "Menu",
                    id: "test3",
                    items: [{
                        caption: "点我试试1",
                        listener: {
                            onClick: function(self){
                                alert("你刚刚点击了：" + self["_caption"]);
                            }
                        },
                        submenu: {
                            id: "test4",
                            items:[{
                                caption: "第三层测试(点击无事件)"
                            },{
                                caption: "CheckItem测试(有事件)",
                                $type: "Checkable",
                                checked: false,
                                hideOnClick: false,
                                listener: {
                                    onCheckedChange: function(self){
                                        alert(self.get("checked"));
                                    }
                                }
                            },{
                                caption: "CheckItem测试(无事件)",
                                $type: "Checkable",
                                checked: true
                            }]
                        }
                    }, {
                        caption: "点我试试2",
                        submenu: {
                            id: "test5",
                            items:[{
                                caption: "第三层测试(点击有事件)",
                                listener: {
                                    onClick: function(){
                                        alert("123");
                                    }
                                }
                            },{
                                caption: "第三层测试"
                            },{
                                caption: "第三层测试"
                            }]
                        }
                    }]
                }
            }],
            height: 400,
            width: 200
        });
		view.addChild(accordion);
 
		$(document).ready(function(){
			view.render(document.body);
		});		
		</script>
	</head>
	<body style="margin: 0;padding: 0;overflow: hidden;">
	</body>
</html>
